<template>
  <div class="home-container" ref="pronbit">
    <navLink :language="language" @languageClick="languageClick" :active="5"></navLink>
    <!-- 黑色背景 -->
    <div class="blue_bg">
      <div class="damand-bg">
        <img src="../../static/images/concat_us_bg.jpg" alt="">
      </div>
      <div class="damand-info">
        <h2>{{ language=='EN'?'Contact us':'联系我们' }}</h2>
        <p>{{ language=='EN'?'Please contact our experienced team today learn more about how we can help you in the near future.':'请立即联系我们经验丰富的团队，了解我们在不久的将来如何帮助您。' }}</p>
        <div class="info">{{ language=='EN'?'Contact way':'联系方式：' }}
          <span class="phone">17353817801</span><span class="email">bailey@jiyitechic.com</span>
        </div>
        <div class="damand-form">
          <el-form :model="formData" ref="ruleForm" label-width="60px" class="damand-ruleForm">
            <el-row>
              <el-col :span="22">
                <el-form-item :label="language=='EN'?'Name':'名字：'" prop="name" class="custom-label">
                  <el-input v-model="formData.name" placeholder="请输入名字：" :placeholder="language=='EN'?'Please Enter Name':'请输入名字：'"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item :label="language=='EN'?'Email':'邮箱：'" prop="email" class="custom-label">
                  <el-input v-model="formData.email" :placeholder="language=='EN'?'Please Enter Email':'请输入邮箱：'"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item :label="language=='EN'?'Project':'项目：'" prop="subject" class="custom-label">
                  <el-input v-model="formData.subject" :placeholder="language=='EN'?'Please Enter Projuct':'请输入项目：'"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="22">
                <el-form-item label="" :label="language=='EN'?'Message':'留言：'" prop="message" class="custom-label">
                  <el-input v-model="formData.message" :placeholder="language=='EN'?'Please Enter Message':'请输入项目：'" type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="60">
                <el-form-item label="" prop="message" class="custom-label">
                  <el-checkbox v-model="checked">{{ language=='EN'?'By sending this message, you consent to us storing the personal data you have chosen to provide.':'发送此消息，即表示您同意我们存储您选择提供的个人数据' }} </el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="" size="large" class="btn-mode">
                  <el-button class="submitBtn" @click="onSubmit('ruleForm')">{{ language=='EN'?'Submit':'提交' }}</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>

    </div>

    <pageFooter></pageFooter>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { sendMessage } from '@/api/home'
import pageFooter from "../../components/pageFooter.vue";
import navLink from "../../components/navLink.vue";
export default {
  components: { pageFooter, navLink },
  data() {
    return {
      formData: {
        name: '',
        email: '',
        subject: '',
        message: '',
      },
      checked: false
    }


  },
  methods: {
    async onSubmit(formName) {
      if (!(this.formData.name || this.formData.email || this.formData.subject || this.formData.message)) {
        this.$message({
          duration: 800,
          message: "请填写完整信息",
          type: 'fail'
        });
        return
      }
      if (!this.checked) {
        this.$message({
          duration: 800,
          message: "请先勾选协议",
          type: 'fail'
        });
        return
      }
      let params = {
        name: this.formData.name,
        email: this.formData.email,
        subject: this.formData.subject,
        message: this.formData.message
      }
      console.log("获取的参数··············", params);
      await sendMessage(params).then(res => {
        // if (res.code == 0) {
        this.$message({
          duration: 800,
          message: "添加成功",
          type: 'success'
        });
        this.$refs[formName].resetFields()
        // } else {
        //   this.$message({
        //     duration: 800,
        //     message: res.msg,
        //     type: 'error'
        //   });
        // }
      })
    },
    languageClick(type) {
      this.$store.commit('changeLanguage', type)
    }
  },
  computed: {
    ...mapState(["keyWord", 'language']),
  },
}

</script>
<style lang="scss" scoped>
html body {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'iconfont';
  src: url('../../static/font/iconfont.woff2?t=1708347338261') format('woff2'),
    url('../../static/font/iconfont.woff?t=1708347338261') format('woff'),
    url('../../static/font/iconfont.ttf?t=1708347338261') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.w {
  width: 1380px;
  margin: 0 auto;
}

ul li {
  list-style: none;
}

.home-container {
  background-color: #f2f2f2;
  width: 100%;
  padding-top: 89px;
  box-sizing: border-box;
  font-family: "Outfit", Sans-serif;
  position: relative;

  .blue_bg {
    width: 100%;
    height: 1150px;
    background-color: #fff;
    // background-color: rgb(47, 43, 43);
    .damand-bg {
      height: 580px;
      img {
        height: 100%;
        width: 100%;
      }
    }

    .damand-info {
      position: absolute;
      top: 580px; /* 子元素顶部距离父元素顶部50% */
      left: 50%; /* 子元素左侧距离父元素左侧50% */
      transform: translate(-50%, -50%); /* 使用transform属性，根据子元素自身宽高的50%进行位移来实现居中 */

      h2 {
        font-size: 5.5rem;
        text-align: center;
        // padding-top: 128px;
        font-family: Poppins;
        font-weight: 700;
        color: #ffffff;
        font-size: 52px;
        text-align: center;
        vertical-align: center;
        padding-top: 30px;
        box-sizing: border-box;
      }

      p {
        margin: 20px 0;
        font-size: 22px;
        text-align: center;
        font-family: Poppins;
        color: #ffffff;
      }

      .info {
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin: 40px 0;
        font-size: 20px;
        color: #ffffff;

        span {
          padding: 0 10px;
        }

        .phone::before {
          content: "\e6c2";
          margin-right: 5px;
          font-family: "iconfont";
        }

        .email::before {
          content: "\e856";
          margin-right: 5px;
          font-family: "iconfont";
        }
      }



      .damand-ruleForm {
        width: 800px;
        height: 653px;
        margin: 0 auto;
        color: #fff;
        padding-top: 20px;
        padding-left: 60px;
        box-sizing: border-box;
        // z-index: 9000;
        background-color: #fff;
        position: relative;
        z-index: 999;
        // border-radius: 24px;
        box-shadow: 0px 0px 36px rgba(0, 0, 0, 0.12);

        .custom-label {
          margin-top: 10px;
          display: flex;
          flex-direction: column;
          font-weight: 600;
          margin-left: 0;
        }

        .custom-label .el-form-item__label {
          color: #fff !important;
          font-size: 20px;
        }

        #checkbox {
          margin: 0 5px;
        }
        .btn-mode {
          display: flex;
          justify-content: center; /* 水平居中 */
          align-items: center; /* 垂直居中 */
          button {
            width: 260px;
            height: 55px;
            background-color: #006cd9;
            color: #ffffff;
            border-radius: 0%;
            // border-radius: 12px;
          }
        }


        .el-checkbox__label {
          width: 500x;
        }

      }
    }



  }

}
</style>
<style lang="scss">
.el-form-item__content {
  left: -60px;
}

.el-checkbox__label {
  // width: 550px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  // line-height: 24px;
  // height: 60px;

}

.el-checkbox {
  display: flex;
  align-items: center;
}
</style>
